<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 	<jsp:include page="header.jsp"/>

<div class="row">
	<div class="span2">
Profile :
<br>
<img alt="Profile pic" src="">
</div>

<div class="span8">
<div class="container">  
<div class="row">  
<div class="span6">  
<ul class="nav nav-tabs">  
<li>  
<a id="teach-tab" href="#" >Teach</a> </li>   
<li class="active"><a id="learn-tab" href="#" >Learn</a></li>  
<li><a id="help-tab" href="#" >Help</a></li>   
<li><a id="mentor-tab" href="#" >Mentor</a></li>   
</ul>  
</div>  
</div>
<div id="teach-tab-sub" style="display:none">
	<p><a class="btn" href="newcourse">Create Course &raquo;</a></p>	
</div>
<div id="learn-tab-sub" >
<ul class="nav nav-tabs">  
<li>  
<a href="#">Popular</a> </li>   
<li  class="active"><a href="#">Recommended</a></li>  
<li class="dropdown">  
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Categories<b class="caret"></b></a>  
         <ul class="dropdown-menu">
        	<c:if test="${not empty categories }">
        		<c:forEach var="category" items="${categories }">
        			<li><a href="#" onclick="getCourses(${category.id})">${category.name }</a></li>	
        		</c:forEach>
        	</c:if> 	  
         </ul>   
         </li>  
</ul>  
</div>
  
</div> 
<div id="course-div1" >
	
</div>
</div>
</div>


	<jsp:include page="footer.jsp" />
	<script type="text/javascript">
var html = '';
$(document).ready(function () {
	getCourses();
});

function getCourses(categoryId){
	var url = 'courses.json?categoryId='+categoryId;
	
	jQuery.ajax({
		url: url,
		type: 'GET',
		success: function (data){
			var html = '';
			data = eval(data);
			if(data != null && data != 'undefined'){
				data = eval(data);
				for(var i =0 ; i < data.length ;i++){
					if(i%3==0){
						if(i != 0){
							html = html + '</div><div class="row">';
						}else{
							html = html + '<div class="row">';
						}
					}
					html = html + '<div class="span2"><h2>'+data[i].name+'</h2><p>'+data[i].description+'.</p><p><a class="btn" href="course/'+data[i].id+'">ViewDetails &raquo;</a></p></div>';
				}
				html = html + '</div>';
			}
			console.log(html);
			document.getElementById('course-div1').innerHTML = html;
			//${'#course-div'}.html(html);
		}
	});		

}
</script>
	
</html> 

